<template>
	<view class="page">
		<view class="main">
			<!-- 平台消息 -->
			<view v-if="type==4">
			<view class="notice-wrap" v-for="(item,index) in list" :key="index" @click="goDetail(item.id)">
				<view class="notice-pic" v-if="index==0">
					<image :src="fileServer+item.img" class="pic" mode="widthFix"></image>
					<view class="notice-pic-zz">
						{{item.title||'--'}}
					</view>
				</view>
				<view class="notice-content" v-else-if="index>0">
					<view class="notice-content-left">
						<view class="notice-content-left-text es2">
							{{item.title||'--'}}
						</view>
						<view class="notice-content-left-time">
							{{item.createTime}} |
							<image src="../../../static/img/yanjing.png" class="yj" mode="widthFix"></image>
							{{item.lookNum||0}}
						</view>
					</view>
					<view class="notice-content-right">
						<image :src="fileServer+item.img" class="pic" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			</view>
			<!-- 名片消息 -->
			<view v-if="type==2">
			<view class="user-card" v-for="(item,index) in list" :key="index">
				<view class="top">
					<view class="tips">
						<view class="tip flexAJC" style="background: #FFE6AE;color: #E1A826;">
							{{item.sign||'--'}}
						</view>
						<view class="tip flexAJC" style="background: #FFC3C3;color: #D73030;">
							<text v-if="item.type==0">经销商</text>
							<text v-if="item.type==1">厂家</text>
							<text v-if="item.type==2">产业链</text>
						</view>
						<view class="tip flexAJC" style="background: #B2CEFF;color: #326ED5;">
							已认证
						</view>
					</view>
					<view class="user">
						<view class="name-wrap">
							<view class="name">
								{{item.name}}
							</view>
							<view class="label">
								{{item.position}}
							</view>
							<image v-if="item.sfVip" class="vip" src="../../../static/img/vip-icon.png" mode="widthFix"></image>
						</view>
						<view class="ads">
							<image class="icon" src="../../../static/img/gongsi.png" mode="widthFix"></image>
							四川省海玲商贸有限公司
						</view>
						<view class="ads">
							<image class="icon" src="../../../static/img/dizhi.png" mode="widthFix"></image>
							{{item.address}}
						</view>
					</view>
					<view class="avatar">
						<image class="tx" src="../../../static/logo.png"></image>
						<view class="text">
							已有<text style="font-weight: bold;">{{item.lxNum||0}}</text>人联系
						</view>
					</view>
				</view>
				<view class="content">
					主营品牌产品：{{item.zypphcp}}
				</view>
				<view class="content">
					销售渠道：{{item.xsqd}}
				</view>
				<view class="btn-list" v-if="item.jhStatus==0">
					<view @click="exchangeCard(2,item)" class="btn flexAJC" style="background-color: #FA9932;">
						<!-- <image class="icon" mode="widthFix" src="../../../static/img/whatsappIcon.png"></image> -->
						不同意
					</view>
					<view @click="exchangeCard(1,item)" class="btn flexAJC" style="background-color: #43B83E;">
						<!-- <image class="icon" mode="wisdthFix" src="../../../static/img/shipin-white.png"></image> -->
						同意
					</view>
					<!-- <view class="btn flexAJC" style="background-color: #43B83E;">
						<image class="icon" mode="widthFix" src="../../../static/img/whatsappIcon.png"></image>
						语音
					</view>
					<view class="btn flexAJC" style="background-color: #FA9932;">
						<image class="icon" mode="widthFix" src="../../../static/img/shipin-white.png"></image>
						视频
					</view>
					<view class="btn flexAJC" style="background-color: #4FBFE7;">
						<image class="icon" mode="widthFix" src="../../../static/img/dizhi-white.png"></image>
						导航
					</view>
					<view class="btn flexAJC" style="background-color: #598FEE;">
						<image class="icon" mode="widthFix" src="../../../static/img/Telephone-white.png"></image>
						电话
					</view>
					<view class="btn flexAJC" style="background-color: #16C40B">
						<image class="icon" mode="widthFix" src="../../../static/img/liaoyilia-green.png"></image>
						聊聊
					</view> -->
				</view>
			</view>
			</view>
			<!-- 上新消息 -->
			<view v-if="type==3">
			<view class="news-card" v-for="(item,index) in list" :key="index">
				<image :src="fileServer+item.productImg" mode="widthFix" class="img"></image>
				<view class="text">
					<text class="tit">{{item.productName}}</text>
					<view class="dec">
						<view class="m">
							<text class="red">{{item.mll}}</text>
							<text class="bf">% </text>
							<text>毛利</text>
						</view>
						<view class="m">
							<text>零售</text>
							<text class="red">{{item.price}}</text>
						</view>
						<view class="m">
							<text>产地{{item.chandi}}</text>
						</view>
					</view>
				</view>
			</view>
			</view>
			<!-- 约谈消息 -->
			<view v-if="type==1">
			<view class="user-card" v-for="(item,index) in list" :key="index">
				<view class="top">
					<view class="avatar-left">
						<image class="tx" :src="item.img"></image>
						<image v-if="item.sfVip" class="vip" :src="fileServer+item.sfVip" mode="widthFix"></image>
						<image v-else class="vip" src="../../../static/img/vip-icon.png" mode="widthFix"></image>
						
					</view>
					<view class="user">
						<view class="name-wrap">
							<view class="name">
								{{item.companyName}}
							</view>
							<view class="label">
								{{item.position}}
							</view>
							<!-- type  0-经销商；1-厂家；2-产业链 -->
							<view v-if="item.type==0" class="dept">
								经销商
							</view>
							<view v-else-if="item.type==1" class="dept">
								厂家
							</view>
							<view v-else-if="item.type==2" class="dept">
								产业链
							</view>
						</view>
						<view class="ads">
							<image class="icon" src="../../../static/img/gongsi.png" mode="widthFix"></image>
							{{item.address||''}}
						</view>
					</view>
					<view class="talk-btn flexAJC">
						<image class="icon" mode="widthFix" src="../../../static/img/liaoyilia-green.png"></image>
						聊聊
					</view>
				</view>
				<view class="content">
					主营品牌产品：{{item.zypphcp}}
				</view>
				<view class="content-text">
					{{item.content}}
				</view>

			</view>
			</view>
		</view>
		<u-loadmore :status="status" />
		<u-empty v-if="status!='loading'&&list.length==0"
		        mode="data"
		        icon="http://cdn.uviewui.com/uview/empty/list.png"
		>
		</u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileServer: this.$fileServer,
				type:0,
				list:[],
				status:'loading',//loading / nomore
				pageIndex:1,
				total:0,
			};
		},
		onLoad(e) {
			this.type = e.index;
			this.info();
		},
		methods: {
			goDetail(id){
				uni.navigateTo({
					url:'/pages/news/detail/detail?id='+id
				})
			},
			info(){
				if(this.type==1){//约谈消息
					uni.setNavigationBarTitle({
						title:'约谈消息'
					})
					this.getList1();
				}else if(this.type==2){//名片消息
					uni.setNavigationBarTitle({
						title:'名片消息'
					})
					
					this.getList2();
				}else if(this.type==3){//上新消息
					uni.setNavigationBarTitle({
						title:'上新消息'
					})
					
					this.getList3();
				}else if(this.type==4){//平台消息
					uni.setNavigationBarTitle({
						title:'平台消息'
					})
					
					this.getList4()
				}
			},
			getList1(){
				this.status = 'loading';
				let pageIndex = this.pageIndex;
				this.$api.msg.getYueTanMsgList({pageIndex}).then(res => {
					if(res.code==200){
						let list = res.rows;
						if(pageIndex==1){
							this.list = list
						}else{
							this.list = this.list.concat(list)
						}
						this.total = res.total;
						if(this.list.length<res.total){
							this.status = 'loadmore';
						}else{
							this.status = 'nomore';
						}
					}
				})
			},
			getList2(){
				this.status = 'loading';
				let pageIndex = this.pageIndex;
				this.$api.msg.getMingpianMsgList({pageIndex}).then(res => {
					if(res.code==200){
						let list = res.rows;
						if(pageIndex==1){
							this.list = list
						}else{
							this.list = this.list.concat(list)
						}
						this.total = res.total;
						if(this.list.length<res.total){
							this.status = 'loadmore';
						}else{
							this.status = 'nomore';
						}
					}
				})
			},
			getList3(){
				this.status = 'loading';
				let pageIndex = this.pageIndex;
				this.$api.msg.getShangXinList({pageIndex}).then(res => {
					if(res.code==200){
						let list = res.rows;
						if(pageIndex==1){
							this.list = list
						}else{
							this.list = this.list.concat(list)
						}
						this.total = res.total;
						if(this.list.length<res.total){
							this.status = 'loadmore';
						}else{
							this.status = 'nomore';
						}
					}
				})
			},
			getList4(){
				this.status = 'loading';
				let pageIndex = this.pageIndex;
				this.$api.msg.getPersonCenterById({pageIndex}).then(res => {
					if(res.code==200){
						let list = res.rows;
						if(pageIndex==1){
							this.list = list
						}else{
							this.list = this.list.concat(list)
						}
						this.total = res.total;
						if(this.list.length<res.total){
							this.status = 'loadmore';
						}else{
							this.status = 'nomore';
						}
					}
				})
			},
			// 交换名片
			exchangeCard(status,item){
				let jhId = item.jhmpId
				this.$api.member.handleMpjh({status,jhId}).then(res => {
					item.jhStatus = 1;
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				})
			},
		},
		//上拉加载
		onReachBottom() {
			if(this.status == 'nomore'){
				return false
			}
			this.pageIndex++;
			this.info();
		},
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #F5F5F5;min-height: 100vh;
	}

	.top-view-tc {
		width: 100%;
		height: 96rpx;
	}

	.top-view {
		width: 100%;
		height: 96rpx;
		background: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.label {
			position: relative;
			font-size: 32rpx;
			font-weight: bold;
		}
	}

	.main {
		padding: 20rpx 32rpx;
		width: 100%;

		.page-title {
			height: 70rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #777777;
			font-size: 28rpx;
			font-weight: bold;

			.more {
				display: flex;
				align-items: center;

				.img {
					width: 18rpx;
					height: auto;
					margin-left: 10rpx;
				}
			}
		}

		.notice-wrap {
			width: 100%;
			border-radius: 16rpx;
			overflow: hidden;
			background: #FFFFFF;margin-bottom: 30rpx;

			.notice-pic {
				position: relative;

				.pic {
					width: 100%;
					height: 264rpx;
				}

				.notice-pic-zz {
					position: absolute;
					bottom: 0;
					width: 100%;
					height: 74rpx;
					background-color: rgba(0, 0, 0, 0.26);
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
					padding: 0 24rpx;
					line-height: 74rpx;
				}
			}

			.notice-content {
				background: #FFFFFF;
				width: 100%;
				height: 150rpx;
				display: flex;
				padding: 16rpx 16rpx 0 24rpx;

				.notice-content-left {
					flex: 1;

					.notice-content-left-text {
						width: 100%;
						line-height: 40rpx;
						font-size: 28rpx;
						margin-bottom: 12rpx;
					}

					.notice-content-left-time {
						color: #777777;
						display: flex;
						align-items: center;
						font-size: 24rpx;

						.yj {
							width: 24rpx;
							height: auto;
							margin: 0 10rpx;
						}
					}
				}

				.notice-content-right {
					width: 170rpx;
					height: 114rpx;

					.pic {
						width: 100%;
						height: 100%;
					}
				}
			}

		}

		.user-card {
			width: 100%;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 24rpx;

			.top {
				width: 100%;
				display: flex;
				padding-bottom: 16rpx;
				margin-bottom: 18rpx;
				border-bottom: 1px solid #F0F0F0;

				.tips {
					width: 118rpx;
					border-radius: 6rpx;
					overflow: hidden;
					flex-shrink: 0;

					.tip {
						width: 100%;
						height: 40rpx;
					}
				}

				.user {
					flex: 1;
					padding: 0 0 0 12rpx;

					.name-wrap {
						line-height: 44rpx;

						.name {

							font-size: 32rpx;
							font-weight: bold;
							margin-right: 10rpx;
							display: inline-block;
						}

						.label {
							font-size: 24rpx;
							color: #AAAAAA;
							display: inline-block;
							margin-right: 6rpx;
						}

						.vip {
							display: inline-block;
							width: 34rpx;
							height: auto;
						}

						.dept {
							width: auto;
							display: inline-block;
							height: 36rpx;
							border-radius: 18rpx;
							border: 1px solid #DE3333;
							color: #DE3333;
							font-size: 24rpx;
							padding: 0 20rpx;
							line-height: 34rpx;
						}
					}

					.ads {
						color: #777777;
						font-size: 28rpx;
						line-height: 40rpx;

						.icon {
							display: inline-block;
							width: 24rpx;
							height: auto;
							margin-right: 6rpx;
						}
					}
				}

				.avatar {
					flex-shrink: 0;
					display: flex;
					flex-direction: column;
					align-items: flex-end;

					.tx {
						width: 74rpx;
						height: 74rpx;
						border-radius: 50%;
					}

					.text {
						margin-top: 8rpx;
						font-size: 24rpx;
					}
				}

				.avatar-left {
					width: 88rpx;
					height: 88rpx;
					position: relative;

					.tx {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}

					.vip {
						position: absolute;
						right: 0;
						top: 0;
						width: 28rpx;
						height: auto;
					}
				}

				.talk-btn {
					width: 120rpx;
					height: 50rpx;
					background: #16C40B;
					border-radius: 25rpx;
					color: #FFFFFF;
					font-size: 24rpx;
					align-self: center;

					.icon {
						width: 24rpx;
						height: auto;
						margin-right: 4rpx;
					}
				}

			}

			.content {
				color: #AAAAAA;
				line-height: 40rpx;
				font-size: 28rpx;
				margin-bottom: 10rpx;
			}

			.btn-list {
				margin-top: 10rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content:flex-end;

				.btn {
					width: 120rpx;
					height: 50rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					border-radius: 25rpx;margin-left:15rpx;

					.icon {
						width: 24rpx;
						height: auto;
						margin-right: 4rpx;
					}
				}
			}

			.content-text {
				padding: 20rpx 0 0 0;
				font-size: 28rpx;
				border-top: 1px solid #F0F0F0;
			}
		
		}
		.news-card{width: 100%;padding: 20rpx;
			background: #FFFFFF;
			border-radius: 16rpx;display: flex;align-items: center;
			.img{width: 116rpx;height: 116rpx;border-radius: 5rpx;}
			.text{flex: 1;padding-left:20rpx;
				.tit{color: #333333;font-weight: bold;font-size: 28rpx;lien-height:26rpx}
				.dec{display: flex;align-items: center;margin-top: 26rpx;
					.m{margin-right: 24rpx;color: #333333;font-size: 22rpx;
						.red{color: #E83149;font-size: 28rpx;}
						.bf{font-size: 16rpx;color: #E83149}
					}
					
				}
			}
		}
	}
</style>